<div class="page-title navigated">
  <div class="row">
    <div class="col-xs-9"><h1>Users Management</h1></div>
    <div class="col-xs-3 main-button">
      <button
        type="button"
        class="btn btn-primary"
        (click)="editUser()"
        [shownFor]="'create_user'"
      >
        Create New User
      </button>
    </div>
  </div>
</div>

<pager [pagingData]="pagedData" (onChange)="fetchData()"></pager>

<div class="row" *ngIf="users && users.length">
  <div class="col-xs-12">

    <div class="table-help">
      <div class="col-xs-4">User</div>
      <div class="col-xs-4">Role</div>
      <div class="col-xs-4">Created</div>
    </div>

    <div
      class="box"
      [ngClass]="{open: user.id === shownUserId}"
      *ngFor="let user of users">
      <div class="col-xs-4 name">
        {{user.data.login}}
      </div>
      <div class="col-xs-4 parameter">
        {{getRoleName(user.data.role_id)}}
      </div>
      <div class="col-xs-3 parameter">
        {{user.time_updated|date_time}}
      </div>

      <div class="col-xs-1 action">
        <a (click)="showUserData(user)">
          <span
            class="glyphicon"
            [ngClass]="'glyphicon-triangle-' + (user.id === shownUserId ? 'bottom' : 'right')"
          ></span>
        </a>
      </div>
      <div class="bowels" *ngIf="user.id === shownUserId">
        <div class="col-xs-5"><h3>User Details</h3></div>
        <div class="col-xs-7"><h3>Changelog</h3></div>

        <div class="col-xs-5">
          <form
            #editUserForm="ngForm"
            class="form-horizontal"
          >
            <div class="form-group">
              <label for="user_login" class="col-xs-2">Login</label>
              <div class="col-xs-10">
                <input
                  type="text"
                  class="form-control"
                  name="user_login"
                  id="user_login"
                  placeholder="Login"
                  [(ngModel)]="newUser.data.login"
                  [submits]="'#save'"
                  required
                >
              </div>
            </div>
            <div class="form-group">
              <label for="user_name" class="col-xs-2">Name</label>
              <div class="col-xs-10">
                <input
                  type="text"
                  class="form-control"
                  name="user_name"
                  id="user_name"
                  placeholder="Full Name"
                  [(ngModel)]="newUser.data.full_name"
                  [submits]="'#save'"
                  required
                >
              </div>
            </div>
            <div class="form-group">
              <label for="user_email" class="col-xs-2">Email</label>
              <div class="col-xs-10">
                <input
                  type="email"
                  class="form-control"
                  name="user_email"
                  id="user_email"
                  placeholder="Email"
                  [(ngModel)]="newUser.data.email"
                  [submits]="'#save'"
                  required
                >
              </div>
            </div>
            <div class="form-group" *ngIf="canSeeRoles">
              <label for="user_role" class="col-xs-2">Role</label>
              <div class="col-xs-10">
                <select
                  class="form-control"
                  name="user_role"
                  id="user_role"
                  [(ngModel)]="newUser.data.role_id"
                  [submits]="'#save'"
                >
                  <option [value]="null">&mdash;</option>
                  <option *ngFor="let role of roles" [value]="role.id">
                    {{role.data.name}}
                  </option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-xs-3 col-xs-offset-2">
                <button
                  type="button"
                  class="btn btn-danger"
                  (confirmedClick)="deleteUser(user)"
                  [confirmation]="'Delete user ' + user.data.login + '?'"
                  [shownFor]="'delete_user'"
                >
                  Delete User
                </button>
              </div>
              <div class="col-xs-5">
                <button
                  type="button"
                  class="btn btn-default pull-right"
                  (click)="resetUserPassword(user)"
                  [shownFor]="'edit_user'"
                >
                  Reset Password
                </button>
              </div>
              <div class="col-xs-2">
                <button
                  id="save"
                  type="button"
                  class="btn btn-primary pull-right"
                  (click)="saveUser()"
                  [disabled]="!editUserForm.form.valid || !hasChanges(user)"
                  [shownFor]="'edit_user'"
                >
                  Save
                </button>
              </div>
            </div>
          </form>
        </div>

        <div class="col-xs-7">
          <div class="user-diff grid">
            <div class="grid-header">
              <div class="col-xs-1 name">Ver.</div>
              <div class="col-xs-2 name">Date</div>
              <div class="col-xs-9 name">Changes</div>
            </div>
            <diff
              *ngFor="let user of getUserVersions(user);let i = index"
              [index]="i"
              [versions]="getUserVersions(user)"
            ></diff>
          </div>
        </div>

      </div>

    </div>
  </div>
</div>

<pager [pagingData]="pagedData" (onChange)="fetchData()"></pager>

<loader *ngIf="!users"></loader>

<modal [title]="'Create New User'">
  <wizard
    [steps]="userSteps"
    (saveHandler)="saveUser($event)"
  >
  </wizard>
</modal>